<script setup lang="ts">
import type { SumaryResponseData } from "./apis/type"
import Description from "@@/components/Description.vue"
import { getSummary } from "./apis"

const summary = ref<SumaryResponseData>({
  code: 0,
  msg: "",
  data: {
    sumary: {
      totalProfit: 0,
      totalPurhase: 0,
      totalSale: 0
    }
  }
})

function formatCurrency(value: number) {
  return new Intl.NumberFormat("de-DE").format(value)
}

onMounted(() => {
  getSummary().then((resp) => {
    summary.value = resp
  })
})
</script>

<template>
  <div un-px-20px un-py-26px un-select-none>
    <Description un-pl-16px />
    <div un-mt-40px>
      <div style="height: 10px" />
      <van-grid :column-num="1" :gutter="10">
        <van-grid-item>
          <van-icon name="shopping-cart-o" size="3rem" />
          <div>Total Sale</div>
          <div class="amount-bold text-2xl text-primary">
            ${{ formatCurrency(summary.data.sumary.totalSale) }}
          </div>
        </van-grid-item>
        <van-grid-item>
          <van-icon name="paid" size="3rem" />
          <div>Total Purhase</div>
          <div class="amount-bold text-2xl text-primary">
            ${{ formatCurrency(summary.data.sumary.totalPurhase) }}
          </div>
        </van-grid-item>
        <van-grid-item>
          <van-icon name="balance-o" size="3rem" />
          <div>Total Profit</div>
          <div class="amount-bold text-2xl text-primary">
            ${{ formatCurrency(summary.data.sumary.totalProfit) }}
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<style scoped>
@layer utilities {
  .amount-bold {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }
  .amount-regular {
    font-variant-numeric: tabular-nums;
    font-weight: 400;
  }
  .symbol-spacing {
    letter-spacing: 0.05em;
  }
}
</style>
